<template>
	<view>
		<view class="head">
			<view>累计获得积分 <text @click="ontappopup()" style="float:right">积分说明</text></view>
			<view class="num">{{credits}}</view>
		</view>
		<view class="list">
			<view class="list-item" v-for="(item,index) in list" :key="index">
				<view class="left">
					<image v-if="item.fileIdList.length != 0"
						:src="imgUrl + item.fileIdList[0] + '?x-image-process=style/style-list'" mode="aspectFill">
					</image>
					<image v-else src="https://staticfile-yj.obs.cn-north-4.myhuaweicloud.com/none.png"
						mode="aspectFill"></image>
					<view class="info">
						<view class="name">{{item.title}}</view>
						<view class="date">
							<uni-icons type="calendar" size="14" color="#9498A0"></uni-icons>
							<text>{{item.createdTime}}</text>
						</view>
					</view>
				</view>
				<view class="right" v-if="item.status == 1">
					<view class="top">
						<image src="https://staticfile-yj.obs.cn-north-4.myhuaweicloud.com/gold%20coin.png"
							mode="widthFix"></image>
						<text>+{{item.score}}</text>
					</view>
					<view class="bottom">
						<text class="status success">审核通过</text>
					</view>
				</view>
				<view class="right" v-else-if="item.status == 2">
					<view class="top">
						<uni-icons type="compose" size="20" color="#00B5DD"
							@click="goTo(`../../takePhotos/takePhotos?id=${item.id}`)"></uni-icons>
						<uni-icons type="trash" size="20" color="#FF5A5A" @click="deletetest(item.id)"></uni-icons>
					</view>
					<view class="bottom">
						<text class="status fail">已驳回</text>
					</view>
				</view>
				<view class="right" v-else>
					<view class="top">
						<uni-icons type="compose" size="20" color="#00B5DD"
							@click="goTo(`../../takePhotos/takePhotos?id=${item.id}`)"></uni-icons>
						<uni-icons type="trash" size="20" color="#FF5A5A" @click="deletetest(item.id)"></uni-icons>
					</view>
					<view class="bottom">
						<text class="status waiting">待审核</text>
					</view>
				</view>
			</view>
			
			<uni-load-more :status="LoadMore" v-if="showLoadMore" :content-text="contentText"></uni-load-more>
			<uni-popup ref="popup" type="dialog">
				<uni-popup-dialog type="warn" mode="base" content="确认删除该条随手拍？" :duration="2000" @close="close"
					@confirm="confirm"></uni-popup-dialog>
			</uni-popup>
			<uni-popup ref="popjifen" type="center">
				<view class="pop-content">
					<view>
					积分基本原则：用户参与到“农宝”任何有益、有效、有价值数据生成的操作行为，都可以获取积分；
					</view>
					<view>
					积分使用原则：积分可以作为“农宝”用户参与到“农宝”提供的商品、礼品、服务、知识的折扣、抵扣、兑换等的奖励活动，但不可转让、赠送、售卖、提现。
					</view>
					<view>
					积分说明: 积分试行期间，积分规则将会适时调整，带来不便敬请谅解）
					</view>
					<view>
					积分是"农宝"平台对用户通过本平台进行操作的行为分析数据，也是兑换奖励的依据。本积分规则设计制定和技术开发的知识产权由"农宝"平台所有。
					严禁利用刷分软件等谋取利益。 一旦发现，将会同网信管理部门、公安机关依法进行严厉打击。用户一旦被技术手段监测到有使用刷分软件的行为，将被封禁。目前，已对使用刷分软件的部分用户进行了封禁处理。
					"农宝"平台将对以下行为进行积分，规则如下：
					</view>
					<view>
					-登录
					</view>
					<view>
					每日首次登录积1分；
					</view>
					<view>
					-“农友圈”发帖（包括上传图片和视频）
					</view>
					<view>
					发帖咨询交流农事活动获取X积分，每日上限X积分；
					</view>
					<view>
					-“农友圈”回帖（包括上传图片和视频）
					</view>
					<view>
					有效回帖获取X积分，每日上限X积分；
					</view>
					<view>
					-农技答复
					</view>
					<view>
					注册成为农技专家，由农技专家答复农事作业问题获取X积分；
					</view>
					<view>
					-随手拍
					</view>
					<view>
					根据完成接到的随手拍任务获取任务相应积分；
					</view>
					<view>
					-“农科讲堂”文章和视频
					</view>
					<view>
					有效阅读文章一篇获取X积分，收看一个视频获取X积分，每日上限X积分；
					</view>
					<view>
					-志愿者帮扶？
					</view>
					<view>
					注册成为志愿者
					</view>
					<view>
					-“农供销”
					</view>
					<view>
					发布有效供需信息获取X积分，每日上限X积分；
					</view>
					<view>
					-“网约农服”
					</view>
					<view>
					发布有效网约农服需求信息获取X积分，每日上限X积分
					</view>
					<view>
					进过网约农服闭环管理后可获取X积分，每日上限X积分？
					</view>
				</view>
			</uni-popup>
		</view>
	</view>
</template>

<script>
	import {
		baseurl,
		queryMySnapshotList,
		deleteSnapshot,
		queryMyTotalScore
	} from "@/api/user.js"
	let imgUrl = "https://nongmao.obs.cn-north-4.myhuaweicloud.com/"
	export default {
		data() {
			return {
				credits: "",
				list: [],
				page: 1,
				maxpage: 0,
				showLoadMore: false,
				imgUrl,
				deleteId: '',
				LoadMore: 'nomore',
				contentText: {
					contentdown: '...',
					contentrefresh: '加载中',
					contentnomore: '暂无数据'
				},
			};
		},
		// onLoad: function(option) { //option为object类型，会序列化上个页面传递的参数
		// 	console.log(option.credits); //打印出上个页面传递的参数。
		// 	this.credits = option.credits;
		// 	this.initData();
		// },
		onShow(){
			this.initData()
		},

		onPullDownRefresh() {
			console.log('onPullDownRefresh');
			this.initData();
		},
		onReachBottom() {
			console.log("onReachBottom");
			console.log("page", this.page, this.maxpage)
			if (this.page == this.maxpage) {
				this.showLoadMore = false;
				return
			}
			this.showLoadMore = true;
			this.page++;
			this.queryMySnapshotList({ //参数
				"condition": null,
				"pageNum": this.page,
				"pageSize": 10
			});
		},
		methods: {
			async queryMySnapshotList(options) {
				const res = await queryMySnapshotList(options);
				this.maxpage = res.returnObj.navigateLastPage;
				this.list = this.list.concat(res.returnObj.list);
				if (this.list.length == 0) {
					this.LoadMore = 'nomore'
				} else {
					this.showLoadMore = false;
				}
			},
			async deleteSnapshot(options) {
				const res = await deleteSnapshot(options);
				if (res.success) {
					this.deleteId = '';
					uni.showToast({
						title: "删除成功！"
					})
					this.initData();
				}
			},
			async queryMyTotalScore(){
				const res = await queryMyTotalScore();
				if(res.success){
					this.credits = res.returnObj
				}
			},
			initData() {
				this.page = 1;
				this.list = [];
				this.showLoadMore = true;
				this.queryMySnapshotList({ //参数
					"condition": null,
					"pageNum": this.page,
					"pageSize": 10
				});
				this.queryMyTotalScore();
				uni.stopPullDownRefresh();
			},
			goTo(e) {
				var url = e;
				uni.navigateTo({
					url: url
				})
			},
			deletetest(id) {
				console.log('id', id)
				this.deleteId = id;
				this.$refs.popup.open()
			},
			close() {
				this.$refs.popup.close()
			},
			ontappopup() {
					this.$refs.popjifen.open()
			},
			confirm() {
				// 输入框的值
				this.deleteSnapshot([this.deleteId]);
				this.$refs.popup.close()
			}

		}
	}
</script>

<style lang="scss">
	page {
		background-image: url("https://staticfile-yj.obs.cn-north-4.myhuaweicloud.com/Mask%20group.png");
		background-repeat: no-repeat;
		background-size: 100% auto;
		background-color: #ffffff;
	}

	.head {
		padding: 100px 60rpx 30px;
		font-size: 28rpx;
		color: #ffffff;

		.num {
			font-size: 68rpx;
			font-weight: bold;
			margin: 10px 0;
		}
	}
	
	.pop-content {
		background: #ffffff;
		line-height: 20px;
		font-size: 24rpx;
		width: 80%;
		height: 500px;
		overflow-y: scroll;
		margin: 0 auto;
		padding: 30rpx;
	
		.title {
			font-size: 28rpx;
			font-weight: bold;
			text-align: center;
		}
	}

	.list {
		padding: 30rpx;
		background-color: #ffffff;
		border-radius: 16px;

		.list-item {
			display: flex;
			flex-flow: row nowrap;
			justify-content: space-between;
			align-items: center;
			margin-bottom: 20px;

			.left {
				display: flex;
				flex: 1;
				flex-flow: row nowrap;
				justify-content: flex-start;
				align-items: stretch;

				.info {
					display: flex;
					flex-flow: column nowrap;
					justify-content: space-between;
					display: inline-block;
					flex: 1;
					margin-left: 10px;
					height: 170rpx;

					.name {
						height: 120rpx;
						font-size: 32rpx;
						color: #283241;
						font-weight: bold;
						line-height: 60rpx;
					}
				}
			}

			.right {
				width: 144rpx;
				height: 170rpx;
				display: flex;
				flex-flow: column;
				justify-content: space-around;
				box-sizing: border-box;

				.top {
					display: flex;
					flex-flow: row nowrap;
					justify-content: center;
					align-items: center;
				}

				.status {
					color: #ffffff;
					white-space: nowrap;
					border-radius: 50px;
					font-size: 24rpx;
					width: 144rpx;
					height: 28px;
					line-height: 28px;
					text-align: center;
					display: block;
				}

				.success {
					background-color: #00B5DD;
				}

				.fail {
					background-color: #FF5A5A;
				}

				.waiting {
					background-color: #FF8752;
				}
			}
		}
	}

	.list-item .left image {
		width: 170rpx;
		height: 170rpx;
		border-radius: 12px;
	}

	.list-item .right image {
		width: 48rpx;
	}

	.list-item .right .top text {
		color: #FFBB0E;
		font-weight: bold;
		font-size: 32rpx;
		margin-left: 10rpx;
	}
</style>